import type { FC, ReactNode } from 'react'
import { memo, useEffect } from 'react'
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

interface TProps {
  children?: ReactNode
}

const LineTest: FC<TProps> = () => {
  useEffect(() => {
    const scene = new THREE.Scene()
    scene.background = new THREE.Color(0xf0f0ff)
    const geometry = new THREE.BoxGeometry(30, 30, 30)
    const material = new THREE.MeshLambertMaterial({
      color: '#008c8c', //0xff0000设置材质颜色为红色
    })
    const pointLight = new THREE.PointLight(0xffffff, 1.5)
    //点光源位置
    pointLight.position.set(500, 500, 200) //点光源放在x轴上
    scene.add(pointLight) //点光源添加到场景中
    const mesh = new THREE.Mesh(geometry, material) //网格模型对象Mesh
    //设置网格模型在三维空间中的位置坐标，默认是坐标原点
    mesh.position.set(-100, 0, 0)
    scene.add(mesh)
    const axesHelper = new THREE.AxesHelper(200)
    scene.add(axesHelper)

    const width = 1200 //宽度
    const height = 750 //高度
    const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 3000)
    camera.far = 20000
    camera.updateProjectionMatrix()
    camera.position.set(1140, 1138, 1170)
    camera.zoom = 1
    camera.lookAt(mesh.position) //指向mesh对应的位置

    // 创建渲染器对象
    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(width, height) //设置three.js渲染区域的尺寸(像素px)
    // renderer.render(scene, camera) //执行渲染操作

    // 设置相机控件轨道控制器OrbitControls
    const controls = new OrbitControls(camera, renderer.domElement)
    controls.target.set(589, 196, 60)
    controls.update()
    // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
    controls.addEventListener('change', function () {
      renderer.render(scene, camera) //执行渲染操作
    })
    // 光源辅助观察
    const pointLightHelper = new THREE.PointLightHelper(pointLight, 10)
    scene.add(pointLightHelper)

    //环境光:没有特定方向，整体改变场景的光照明暗
    const ambient = new THREE.AmbientLight(0xffffff, 0.2)
    scene.add(ambient)

    // 路径绘制
    const lineMate = new THREE.LineBasicMaterial({ color: 'black', opacity: 1 })
    const points = []
    points.push(new THREE.Vector3(-100, 0, 0))
    points.push(new THREE.Vector3(0, 100, 0))
    points.push(new THREE.Vector3(100, 0, 0))
    points.push(new THREE.Vector3(200, 100, 0))
    points.push(new THREE.Vector3(300, 0, 0))

    const lineGeometry = new THREE.BufferGeometry().setFromPoints(points)
    const line = new THREE.Line(lineGeometry, lineMate)
    scene.add(line)
    renderer.render(scene, camera)
    // 运动相关指数
    let direction = 1
    let inputDistance = 0,
      targeDistance = 0,
      speed = 10
    // 物体运动
    function renderRobot() {
      const x = mesh.position.x
      const y = mesh.position.y
      const z = mesh.position.z
      if (x >= 300) {
        direction = -1
      }
      if (x <= -100) {
        direction = 1
      }
      if (x <= 0) {
        mesh.position.x += 0.5 * direction
        mesh.position.y += 0.5 * direction
        mesh.lookAt(15, 15, 0)
      } else if (x <= 100) {
        mesh.position.x += 0.5 * direction
        mesh.position.y -= 0.5 * direction
      } else if (x <= 200) {
        mesh.position.x += 0.5 * direction
        mesh.position.y += 0.5 * direction
      } else {
        mesh.position.x += 0.5 * direction
        mesh.position.y -= 0.5 * direction
      }

      //   mesh.position.z += 0.5 * direction
      //   mesh.rotateX(0.01)
      //   mesh.rotateZ(0.01)
      renderer.render(scene, camera) //执行渲染操作
      requestAnimationFrame(renderRobot) //请求再次执行渲染函数render，渲染下一帧
    }
    renderRobot()

    document.getElementById('webgl')?.appendChild(renderer.domElement)
  }, [])
  return (
    <div id="threeJsLineDemo">
      <h2>LineTest</h2>
      <div
        id="webgl"
        style={{ margin: '30px' }}
      ></div>
    </div>
  )
}

export default memo(LineTest)
